<template>
  <div class="hello">
     <div :style="box">



         <div :class="keyBoxArr">
            <div  style="width:100%;height:50px;line-height:50px;
               text-align:center;font-weight:600;border-bottom:1.5px solid #f0f0f0">
               <div @click="cancel" class="ar_left"></div>

                 请输入交易密码
            </div>

            <div class="encryptionBox" style="height:45px;width:100%;margin-top:20px">
                <div style="width:80%;height:100%;margin:0 auto;border:1.5px solid #c5c5c5; border-radius:8px">


                  <div  style="width:16%;height:100%;float:left;border-right:1.5px solid #c5c5c5">

                         <div v-if="flagArr[0].flag"  style="width:14px;height:14px;background-color:#333333;border-radius:14px;margin:0 auto;margin-top:15px"></div>

                  </div>
                   <div style="width:16%;height:100%;float:left;border-right:1.5px solid #c5c5c5">

                          <div v-if="flagArr[1].flag" style="width:14px;height:14px;background-color:#333333;border-radius:14px;margin:0 auto;margin-top:15px"></div>

                   </div>
                    <div style="width:16%;height:100%;float:left;border-right:1.5px solid #c5c5c5">
                            <div v-if="flagArr[2].flag" style="width:14px;height:14px;background-color:#333333;border-radius:14px;margin:0 auto;margin-top:15px"></div>

                    </div>
                     <div style="width:16%;height:100%;float:left;">
                           <div v-if="flagArr[3].flag" style="width:14px;height:14px;background-color:#333333;border-radius:14px;margin:0 auto;margin-top:15px"></div>

                     </div>
                      <div style="width:16%;height:100%;float:left;border-left:1.5px solid #c5c5c5">
                             <div v-if="flagArr[4].flag" style="width:14px;height:14px;background-color:#333333;border-radius:14px;margin:0 auto;margin-top:15px"></div>

                      </div>
                       <div style="width:16%;height:100%;float:left;border-left:1.5px solid #c5c5c5">
                              <div v-if="flagArr[5].flag" style="width:14px;height:14px;background-color:#333333;border-radius:14px;margin:0 auto;margin-top:15px"></div>

 
                       </div>
                </div>

            </div>

            <div :class="keyBoxArr_bottom"  style="width:100%;height:210px;position:absolute;bottom:0;border-top:1px solid #f0f0f0"> 

                  <div style="height:50px;border-bottom:1.5px solid #c6c6c6">
                      <div @click="numberClick('1')" id="one" style="font-size:18px;font-weight:600;width:33.33%;height:100%;float:left;line-height:50px;text-align:center;border-right:1.5px solid #c6c6c6">1</div>
                        <div  @click="numberClick('2')" id="two" style="font-size:18px;font-weight:600; width:33.33%;height:100%;float:left;line-height:50px;text-align:center">2</div>
                          <div  @click="numberClick('3')" id="three" style="font-size:18px;font-weight:600;width:33.33%;height:100%;float:left;line-height:50px;text-align:center;border-left:1.5px solid #c6c6c6">3</div>
                  </div>

                   <div style="height:50px;border-bottom:1.5px solid #c6c6c6">
                       <div  @click="numberClick('4')" id="four" style="font-size:18px;font-weight:600;width:33.33%;height:100%;float:left;line-height:50px;text-align:center;border-right:1.5px solid #c6c6c6">4</div>
                        <div  @click="numberClick('5')" id="five" style="font-size:18px;font-weight:600;width:33.33%;height:100%;float:left;line-height:50px;text-align:center">5</div>
                          <div  @click="numberClick('6')" id="six" style="font-size:18px;font-weight:600;width:33.33%;height:100%;float:left;line-height:50px;text-align:center;border-left:1.5px solid #c6c6c6">6</div>
                  </div>

                   <div style="height:50px;border-bottom:1.5px solid #c6c6c6">
                       <div  @click="numberClick('7')" id="seven" style="font-size:18px;font-weight:600;width:33.33%;height:100%;float:left;line-height:50px;text-align:center;border-right:1.5px solid #c6c6c6">7</div>
                        <div  @click="numberClick('8')" id="eight" style="font-size:18px;font-weight:600;width:33.33%;height:100%;float:left;line-height:50px;text-align:center">8</div>
                          <div  @click="numberClick('9')" id="nine" style="font-size:18px;font-weight:600;width:33.33%;height:100%;float:left;line-height:50px;text-align:center;border-left:1.5px solid #c6c6c6">9</div>
                  </div>

                   <div style="height:54px;">
                       <div style="background-color:#d1d4dd;width:33.33%;height:100%;float:left;line-height:50px;text-align:center;border-right:1.5px solid #c6c6c6"></div>
                        <div  @click="numberClick('0')" id="zero" style="font-size:18px;font-weight:600;width:33.33%;height:100%;float:left;line-height:50px;text-align:center">0</div>
                          <div @click="deleteBack" style=" background-color:#d1d4dd;width:33.33%;height:100%;float:left;line-height:50px;text-align:center;border-left:1.5px solid #c6c6c6">


                                <div class="deleteShape"></div>


                          </div>
                  </div>






                
            </div>


            


         </div>
     </div>
  

     
  </div>
</template>

<script>

export default {
  name: 'KeyBoard',
  props: {
    
  },
  data() {
      return {
        passArr:[],
        keyBoxArr:["keyBox"],
        keyBoxArr_bottom:["number_KB"],
        flagArr:[
         { flag:false,},
         { flag:false,},
         { flag:false,},
         { flag:false,},
         { flag:false,},
         { flag:false,}
        ],
        length:"",
        box:{
            width:"100%",
            height:document.documentElement.clientHeight+"px",
            backgroundColor: "rgba(17, 17, 17, 0.68)",
            position:"fixed",
            bottom:'-4px',
            zIndex:9999
           
        },
      
         
      }
  },
  watch: {
    length(newValue){
      // console.log(newValue,oldValue)


       for(var i=0;i<=newValue-1;i++){
          this.flagArr[i].flag=true

       }

         for(var n=newValue;n<=5;n++){
          this.flagArr[n].flag=false

       }





    }
  },

  mounted() {
    //   this.keyBox.hei
    // var that=this
  
    // alert(this.classArr)
 
  },
  methods: {
     deleteBack(){
        //  alert(0)
        var length=this.passArr.length

        if(length==6){
          console.log("数据已满6位")
        }else if(length<=5){
           this.passArr.pop()
           this.length=this.passArr.length
          //  alert(this.passArr.length)

        }
      
        // console.log(JSON.stringify(this.passArr)  )




     },
     cancel(){
       this.passArr=[]
       this.length=0
      //  this.
      this.keyBoxArr=["keyBoxOut"]
  
        this.keyBoxArr_bottom=["keyBoxArr_bottomOut"]

      this.box.backgroundColor=""
      this.$emit("cancel")
     },
     numberClick(value){
       var length=this.passArr.length
      
      //  alert(length)
       
       if(length>=6){
        console.log("不添加了")

       }else if(length==5){
        //  request()
        // alert("6位了")
          this.passArr.push(value)
          
          this.length=this.passArr.length



          // alert( this.length)

        this.$emit("done",this.passArr.join(""))
       }else{
          this.passArr.push(value)

           this.length=this.passArr.length

              // alert( this.length)




       }





      //  console.log(JSON.stringify(this.passArr) )










      //  alert(value)
        if(value==0){
        document.getElementById("zero").style.backgroundColor="#d1d4dd"
        setTimeout(function(){
             document.getElementById("zero").style.backgroundColor=""
        },150)
      }

      if(value==1){
        document.getElementById("one").style.backgroundColor="#d1d4dd"
        setTimeout(function(){
             document.getElementById("one").style.backgroundColor=""
        },150)
      }

       if(value==2){
        document.getElementById("two").style.backgroundColor="#d1d4dd"
        setTimeout(function(){
             document.getElementById("two").style.backgroundColor=""
        },150)
      }

        if(value==3){
        document.getElementById("three").style.backgroundColor="#d1d4dd"
        setTimeout(function(){
             document.getElementById("three").style.backgroundColor=""
        },150)
      }

        if(value==4){
        document.getElementById("four").style.backgroundColor="#d1d4dd"
        setTimeout(function(){
             document.getElementById("four").style.backgroundColor=""
        },150)
      }

       if(value==5){
        document.getElementById("five").style.backgroundColor="#d1d4dd"
        setTimeout(function(){
             document.getElementById("five").style.backgroundColor=""
        },150)
      }

        if(value==6){
        document.getElementById("six").style.backgroundColor="#d1d4dd"
        setTimeout(function(){
             document.getElementById("six").style.backgroundColor=""
        },150)
      }

         if(value==7){
        document.getElementById("seven").style.backgroundColor="#d1d4dd"
        setTimeout(function(){
             document.getElementById("seven").style.backgroundColor=""
        },150)
      }

       if(value==8){
        document.getElementById("eight").style.backgroundColor="#d1d4dd"
        setTimeout(function(){
             document.getElementById("eight").style.backgroundColor=""
        },150)
      }

        if(value==9){
        document.getElementById("nine").style.backgroundColor="#d1d4dd"
        setTimeout(function(){
             document.getElementById("nine").style.backgroundColor=""
        },150)
      }













     }
    

  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  scoped>
  
   .deleteShape{
      
        margin: 0 auto;
        margin-top: 18px;
        width: 12px;   
        height: 12px; 
        /* background-color: red  ; */
       border-top: 2px solid #3c3c3d;

        border-right: 2px solid #3c3c3d;

        transform: rotate(225deg);

        /* margin-right: -50px; */
   }
   .ar_left{
       position: absolute;
        left: 15px;
        top: 18px;
        
        width: 12px;   
        height: 12px; 
        /* background-color: red  ; */
       border-top: 2px solid #867f7a;

        border-right: 2px solid #867f7a;

        transform: rotate(225deg);

        margin-right: -50px;

           /* animation:kBoxOuder .2s;
            animation-timing-function: cubic-bezier(0,0,1,1);
            -moz-animation-timing-function: cubic-bezier(0,0,1,1);
            -webkit-animation-timing-function: cubic-bezier(0,0,1,1); */


   }
  
   .keyBox{
            height:65%;
            /* box-sizing: border-box;
            -webkit-box-sizing: border-box; */
            width:100%;
            background-color:white;
            position:absolute;
            bottom:0;
            animation:kBox .2s;
            animation-timing-function: cubic-bezier(0,0,1,1);
            -moz-animation-timing-function: cubic-bezier(0,0,1,1);
            -webkit-animation-timing-function: cubic-bezier(0,0,1,1);
   }
   
   @keyframes kBoxOuder {

        0% { height:0% ;  }
          
              50% { height:42.5% ;  }
          
                  100% { height:65% ;  }
     
   }

   @keyframes kBox
        {
          0% { height:0% ;  }
            25% { height:16.25% ;  }
              50% { height:42.5% ;  }
                75% { height:56.75% ;  }
                  100% { height:65% ;  }
        }
   @-webkit-keyframes kBox
      {
          0% { height:0% ;  }
            25% { height:16.25% ;  }
              50% { height:42.5% ;  }
                75% { height:56.75% ;  }
                  100% { height:65% ;  }
        }

      .keyBoxOut{
            height:0%;
          
            width:100%;
            background-color:white;
            position:absolute;
            bottom:0;
            animation:kBoxOut .2s;
            animation-timing-function: cubic-bezier(0,0,1,1);
            -moz-animation-timing-function: cubic-bezier(0,0,1,1);
            -webkit-animation-timing-function: cubic-bezier(0,0,1,1);
   }
   @keyframes kBoxOut
        {
            0% { height:65% ;  }
               25% { height:56.75% ;  }
                  50% { height:42.5% ;  }
                    75% { height:16.25% ;  }
          100% { height:0% ;  }
          
           
             
                
        }
   @-webkit-keyframes kBoxOut
      {
          0% { height:65% ;  }
               25% { height:56.75% ;  }
                  50% { height:42.5% ;  }
                    75% { height:16.25% ;  }
          100% { height:0% ;  }
        }
      


    .number_KB{

           animation:number_KB .2s;
            animation-timing-function: cubic-bezier(0,0,1,1);
            -moz-animation-timing-function: cubic-bezier(0,0,1,1);
            -webkit-animation-timing-function: cubic-bezier(0,0,1,1);


    }

     @keyframes number_KB
        {
            0% { height:0px ;  }
               25% { height:55px ;  }
                  50% { height:120px ;  }
                    75% { height:180px ;  }
          100% { height:210px ;  }
          
           
             
                
        }
   @-webkit-keyframes number_KB
      {
            0% { height:0px ;  }
               25% { height:55px ;  }
                  50% { height:120px ;  }
                    75% { height:180px ;  }
          100% { height:210px ;  }
        }
      
   .keyBoxArr_bottomOut{
           animation:number_KBOut .2s;
            animation-timing-function: cubic-bezier(0,0,1,1);
            -moz-animation-timing-function: cubic-bezier(0,0,1,1);
            -webkit-animation-timing-function: cubic-bezier(0,0,1,1);
    }    

     @keyframes number_KBOut
        {
            0% { height:210px ;  }
               25% { height:180px ;  }
                  50% { height:120px ;  }
                    75% { height:55px ;  }
          100% { height:0px ;  }
          
           
             
                
        }
   @-webkit-keyframes number_KBOut
      {
             0% { height:210px ;  }
               25% { height:180px ;  }
                  50% { height:120px ;  }
                    75% { height:55px ;  }
          100% { height:0px ;  }
          
        }

      
</style>

